<!--分享页面-->
<template>
  <div class="share">
    <!--分享头部-->
    <div class="share-header">
      <div class="header-logo-left">
        <router-link to="/Home/Brochure">返回</router-link>
      </div>
      <div class="header-logo-right" style="float:right">
        <img @click="forwarding()" src="../assets/images/tab_share.png">
      </div>
      <div style="clear:both"></div>
      <div class="header-title">
        <div class="header-title-name">选址推荐方案</div>
      </div>
      <div class="header-update">
        <div class="header-update-title">
          <div class="header-update-title-img">
            <img src="../assets/images/time.jpg">
          </div>
          <div class="header-update-title-name">房源有效性与平台同步更新</div>
        </div>
        <div class="header-update-time">{{time}}</div>
      </div>
    </div>
    <!--联合办公-写字楼/园区-->
    <div class="share-switch">
      <div class="share-switch-tab">
        <div
          v-show="this.brochureList.length"
          :class="show=='2'?'acitve':''"
          class="share-switch-tablist"
          @click="son('1')"
        >
          <br>写字楼/园区
        </div>
        <div
          v-show="this.communityList.length"
          :class="show=='1'?'acitve':''"
          class="share-switch-tablist"
          @click="son('2')"
        >
          <br>联合办公
        </div>
      </div>
      <div class="share-switch-icon">
        <div class="share-switch-item">
          <div v-if="show=='1'" class="share-switch-list">
            <div class="share-switch-name">{{brochureTail.minArea}}～{{brochureTail.maxArea}} m²</div>
            <div class="share-switch-num">面积</div>
          </div>
          <div v-if="show=='1'" class="share-switch-br"></div>
          <div class="share-switch-list">
            <div class="share-switch-name">{{brochureTail.minPrice}}～{{brochureTail.maxPrice}}元</div>
            <div class="share-switch-num">单价</div>
          </div>
          <div v-if="show=='1'" class="share-switch-br"></div>
          <div v-if="show=='1'" class="share-switch-list">
            <div
              class="share-switch-name"
            >{{brochureTail.minMonthlyRent}}～{{brochureTail.maxMonthlyRent}}万元</div>
            <div class="share-switch-num">月租</div>
          </div>
        </div>
      </div>
      <div class="share-cont" style="margin-top:1rem;">
        <div
          class="brochurecont"
          v-if="show == '1'"
          style="padding-top:1rem;max-height:20rem;min-height:7rem;padding-bottom:1rem;overflow-y:auto;"
        >
          <div
            class="share-item"
            v-for="(item,index) in brochureList"
            :key="index"
            @click="toHouseDetail(item)"
          >
            <div class="brochurecont-left">
              <img :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:imgDefault">
            </div>
            <div class="brochurecont-right">
              <div
                class="brochurecont-right-title"
              >{{item.houseName}}</div>
              <div class="brochurecont-right-shangjia pricemony">
                上架：{{item.publishTime}}
                <!-- <span v-show="">直租计划</span> -->
              </div>
              <div class="brochurecont-right-cont">
                <div class="brochurecont-right-address pricemony">{{item.tradingArea}}</div>
                <div class="brochurecont-right-num">
                  <span>{{item.price}}</span>元/m²·天
                </div>
              </div>
              <div class="brochurecont-right-cont">
                <div class="brochurecont-right-yue pricemony">浏览量{{countHouseVisits[index].count}}</div>
              </div>
            </div>
            <div v-if="item.publishStatus==0" class="brochurecont-not">
              <img src="../assets/images/icon_fail.png">此房源已下架
            </div>
          </div>
          <div class="shflase" v-if="brochureList.length < 1">
            <div>暂无房源</div>
          </div>
        </div>
        <div
          class="brochurecont"
          v-if="show == '2'"
          style="padding-top:1rem; background: #FFFFFF;;margin:0.55rem 0.75rem 0 0.75rem;;max-height:20rem;min-height:7rem;padding-bottom:1rem"
        >
          <div
            class="share-item"
            v-for="(item,index) in communityList"
            :key="index"
            @click="toCommunityDetail(item)"
          >
            <div class="brochurecont-left">
              <img :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:imgDefault">
            </div>
            <div class="brochurecont-right">
              <div class="brochurecont-right-title">{{item.communityName}} - {{item.brandName}}</div>
              <div class="brochurecont-right-shangjia">
                <label style="width:100px;">开放式工位价格：</label>
                {{item.spacePrice}} 元/月
              </div>
              <div class="brochurecont-right-shangjia">
                <label style="width:100px;">独立办公室价格：</label>
                {{item.officePrice}} 元·间/月
              </div>
              <div v-if="item.roadPrice" class="brochurecont-right-shangjia">
                <label style="width:100px;">路演场地价格 ：</label>
                {{item.roadPrice}} 元·㎡/月
              </div>
            </div>
          </div>
          <div class="shflase" v-if="communityList.length < 1">
            <div>暂无房源</div>
          </div>
        </div>
      </div>
    </div>
    <div class="share-pt"></div>
    <div class="share-contact" :style="{width:'100%'}" v-if="userRegister.companyName">
      <div class="share-contact-head">
        <img :src="userRegister.headPortrait?locationUrl+userRegister.headPortrait:imgDefault">
      </div>
      <div class="share-contact-title">
        <div class="share-contact-title-name">{{userRegister.name}}</div>
        <div class="share-contact-title-company">所属公司：{{userRegister.companyName}}</div>
      </div>
      <div class="share-contact-phone">
        <el-tooltip class="item" effect="dark" :content="userRegister.phone" placement="top">
          <!-- <el-button>左上</el-button> -->
          <img src="../assets/images/tab_phone.png">
        </el-tooltip>
        <!-- <img src="../assets/images/tab_phone.png" :title="userRegister.phone"> -->
      </div>
    </div>
    <el-dialog :visible.sync="brochureShare" :show-close="false">
      <div class="brochure-title">
        <span>分享楼书：</span>
        {{title}}
      </div>
      <div class="brochure-content">
        <label>链接：</label>
        <input id="foo" type="text" v-model="jumpLink">
        <span
          type="text"
          style="margin-left:15px;"
          data-clipboard-target="#foo"
          @click="copy()"
          class="copy"
        >复制</span>
      </div>
      <div style="overflow:hidden;margin-top:100px;">
        <el-button style="float:right;" @click="brochureShare = false">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import * as houseListAPI from "@/api/brochure";
import * as homeAPI from "@/api/home";

export default {
  name: "Share",
  data() {
    return {
      show: "1",
      countHouseVisits: [],
      countCommunityVisits: [],
      brochureList: [], //房源
      communityList: [], //联合办公
      brochureTail: [], //楼书详情
      uid: 0,
      time: "",
      jumpLink: "",
      userRegister: {},
      brochureShare: false,
      title: "",
      userInfo: "",
      msg: "^.{0,10}",
      left: "50%"
      // fyid:0,
    };
  },
  beforeMount() {
    this.value2 = "时间";
  },
  computed: {
    loclUrl() {
      let ip = window.location.host,
        url = "";
      if (ip.indexOf("127.0.0.1") >= 0 || ip.indexOf("localhost") >= 0) {
        url = "http://114.113.68.14:9000";
      } else if (ip.indexOf("www.") >= 0) {
        url = "http://3dzhixuan.com";
      } else {
        url = "http://" + ip;
      }
      return url;
    }
  },
  created() {
    // if (localStorage.userInfo) {
    //   this.userInfo = JSON.parse(localStorage.userInfo);
    // }
    this.uid = this.$route.query.id;
    this.time = this.$route.query.createTime.slice(0, 10);
    this.title = this.$route.query.title;
  },
  mounted() {
    this.getmybrochure();
    this.getcommunityList();
    this.getbrochureTail();
    this.tabshow();
    this.getBrochureUserInfo();
    if (this.isMobile()) {
      this.left = "100%";
    } else {
      this.left = "50%";
    }
  },
  updated() {
    // alert(this.show)
  },
  methods: {
    son(item) {
      this.show = item;
      this.getbrochureTail();
    },
    getLocationUrl() {
      var ip = window.location.host,
        url = "";
      if (ip.indexOf("127.0.0.1") >= 0 || ip.indexOf("localhost") >= 0) {
        url = "http://114.113.68.14:9002";
      } else if (ip.indexOf("www.") >= 0) {
        url = "http://wap.3dzhixuan.com";
      } else {
        // url = "http://" + ip;
        url = "http://114.113.68.14:9002";
      }
      return url;
    },
    //判断是否有房源及社区
    tabshow() {
      if (this.communityList < 1) {
        this.show = 1;
        return;
      }
      if (this.brochureList.length < 1) {
        this.show = 2;
        return;
      }
    },
    //转发分享
    forwarding(row) {
      this.jumpLink = this.loclUrl + "/console/#/Share?id=" + this.uid;
      this.brochureShare = true;
    },
    //获取房源
    getmybrochure() {
      this.brochureList = [];
      houseListAPI
        .getHousingList({ brochureId: this.uid })
        .then(res => {
          this.brochureList = res.data;
          let list = [];
          res.data.forEach(element => {
            list.push(element.houseId);
          });
          this.countVisits("3", list);
          if (res.data.length <= 0) {
            this.show = "2";
          }
        })
        .catch(err => {
          // this.$message.warning('')
          console.log("获取房源===>", err);
        });
    },
    //获取联合办公列表
    getcommunityList() {
      this.communityList = [];
      houseListAPI
        .getCommunityList({ brochureId: this.uid })
        .then(res => {
          this.communityList = res.data;
          let list = [];
          res.data.forEach(element => {
            list.push(element.communityId);
          });
          this.countVisits("2", list);
        })
        .catch(err => {
          // this.$message.warning('')
          console.log("获取联合办公列表===>", err);
        });
    },
    //楼书详情
    getbrochureTail() {
      this.brochureTail = [];
      houseListAPI
        .getBrochureTail({ brochureId: this.uid, type: this.show })
        .then(res => {
          this.brochureTail = res.data;
        });
    },
    //获取楼书用户信息
    getBrochureUserInfo() {
      this.userRegister = {};
      houseListAPI.getBrochureUserInfo({ brochureId: this.uid }).then(res => {
        this.userRegister = res.data;
      });
    },
    //返回上一页
    returngo() {
      this.$router.go(-1);
    },
    //获取图片路径
    getImgUrl() {
      var ip = window.location.host,
        url = "";
      if (ip.indexOf("127.0.0.1") >= 0 || ip.indexOf("localhost") >= 0) {
        url = "http://114.113.68.14:9000/image/";
      } else if (ip.indexOf("www.") >= 0) {
        url = "http://image.3dzhixuan.com/image/";
      } else {
        url = `http://" + ${ip} + "/image`;
      }
      return url;
    },
    // 浏览量（多）
    countVisits(type, list) {
      homeAPI.countVisits({ type: type, ids: list }).then(res => {
        if (type == "3") {
          this.countHouseVisits = res.data;
        } else {
          this.countCommunityVisits = res.data;
        }
      });
    },
    // 去房源详情
    toHouseDetail(item) {
      if (this.isMobile()) {
        window.open(
          this.getLocationUrl() +
            "/three/household.html?name=" +
            item.building3dCode +
            "&hsid=" +
            item.roomNo +
            "&houseid=" +
            item.houseId +
            "&buildid=" +
            item.buildingId +
            "&brochureId=" +
            this.uid
        );
      } else {
        window.open(
          "/three/fxfyxq.html?name=" +
            item.building3dCode +
            "&cnt=0&houseid=" +
            item.houseId +
            "&buildid=" +
            item.buildingId +
            "&brochureId=" +
            this.uid
        );
      }
    },
    // 去社区详情
    toCommunityDetail(item) {
      if (this.isMobile()) {
        window.open(
          this.getLocationUrl() +
            "/item/views/community/community.html?id=" +
            item.communityId +
            "&brochureId=" +
            this.uid
        );
      } else {
        window.open(
          "/item/views/community/unitedOfficeCommunity.html?id=" +
            item.communityId +
            "&brochureId=" +
            this.uid
        );
      }
    },
    //复制
    copy() {
      var clipboard = new Clipboard(".copy");
      clipboard.on("success", function(e) {
        this.$message.success("复制成功");
        console.log("复制成功");
        e.clearSelection();
      });
      clipboard.on("error", function(e) {
        this.$message.warning("复制失败,当前浏览器不支持复制！");
        console.log("复制失败");
      });
    },
    isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    }
  }
};
</script>
<style scoped>
.share {
  max-width: 640px;
  height: 100%;
  overflow-y: auto;
  margin: 0 auto;
  background: url("../assets/images/lou-bg.png") no-repeat;
  background-size: 100% 100%;
}
.share-header {
  color: #ffffff;
  padding: 0.35rem 0.95rem 0.55rem 0.95rem;
}
.header-logo {
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-logo-left {
  font-size: 0.55rem;
  width: 2.5rem;
  text-align: center;
  line-height: 1rem;
  height: 1rem;
  background: #ffffff;
  color: #61c1fd;
  border-radius: 2rem;
}
.header-logo-left > a {
  color: #61c1fd;
}
.header-logo-right {
  width: 1.65rem;
}
.header-title {
  height: 2rem;
  line-height: 2rem;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
}
.header-logo-return {
  width: 1.35rem;
  margin-right: 0.35rem;
}
.header-logo-padding {
  width: 100%;
}
.header-name {
  display: flex;
  font-size: 0.7rem;
  align-items: center;
}
.header-update {
  display: flex;
  font-size: 0.6rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.35rem;
}
.header-update-title {
  display: flex;
  align-items: center;
}
.header-update-title-img {
  width: 0.75rem;
  margin-right: 0.25rem;
}
.share-contact {
  z-index: 999;
  position: fixed;
  bottom: 0;
  /* left: 50%; */
  /* margin-left: -320px; */
  /* width: 640px; */
  background: #ffffff;
  padding: 0.95rem 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.share-contact-head {
  width: 3rem;
  border-radius: 50%;
  margin-left: 0.75rem;
}
.share-contact-phone {
  width: 2.55rem;
  border-radius: 50%;
  margin-right: 0.75rem;
}
.share-contact-title {
  width: 100%;
  padding-left: 0.55rem;
}
.share-contact-title-name {
  font-size: 0.75rem;
  color: #333333;
}
.share-contact-title-company {
  font-size: 0.5rem;
  color: #666666;
  margin-top: 0.15rem;
}
.share-item {
  padding: 1rem 0.75rem;
  border-bottom: 1px #f4f4f4 solid;
  position: relative;
  align-items: center;
}
.brochurecont-left {
  width: 7rem;
  height: 5.2rem;
  padding-right: 0.75rem;
  float: left;
}
.brochurecont-left > img {
  border-radius: 0.35rem;
  height: 100%;
}
.brochurecont-right {
  width: 100%;
}
.brochurecont-right-title {
  margin-top: 0.15rem;
  color: #333333;
  font-weight: bold;
  font-size: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brochurecont-right-shangjia {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  color: #333333;
  font-size: 0.55rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brochurecont-right-shangjia > span {
  margin-left: 0.25rem;
  background-color: #fef5da;
  color: #ffba1d;
  padding: 0.1rem 0.35rem;
}
.brochurecont-right-num > span {
  color: #39b4ff;
  font-size: 0.75rem;
}
.brochurecont-right-cont {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #666666;
  font-size: 0.55rem;
}
.brochurecont-right-lucheng {
  background-color: #f3f3f3;
  color: #9799a7;
  padding: 0.1rem 0.35rem;
}
.brochurecont-not {
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.7rem;
}
.brochurecont-not > img {
  width: 1.35rem;
  margin-right: 0.15rem;
}
.brochurecont-footer {
  border-bottom: 1px #f4f4f4 solid;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.55rem 0.75rem;
}
.brochurecont-footer-list {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
}
.pricemony {
  font-size: 0.35rem;
  line-height: 1.1rem;
}
.shflase > div {
  font-size: 1rem;
  text-align: center;
  line-height: 6rem;
  color: #666;
}
/*分享主体内容*/
.share-switch {
  margin-top: 0.55rem;
}
.share-switch-header {
  background: #ffffff;
  margin: 0 0.75rem;
  padding-bottom: 0.85rem;
}
.share-switch-title {
  display: flex;
  justify-content: center;
  font-weight: bold;
  text-align: center;
  line-height: 1.25rem;
  color: #333333;
  font-size: 0.75rem;
  padding: 0.75rem 0;
}
.share-switch-icon {
  background: #ffffff;
  margin: 0 0.75rem;
  padding: 0.95rem 0;
}
.share-switch-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-switch-list {
  text-align: center;
  width: 32%;
}
.share-switch-width {
  text-align: center;
  width: 100%;
}
.share-switch-br {
  border-left: 1px #bbbbbb solid;
  height: 1.55rem;
}
.share-switch-name {
  color: #333333;
  font-size: 0.7rem;
}
.share-switch-num {
  color: #bbbbbb;
  font-size: 0.65rem;
  margin-top: 0.15rem;
}
.share-cont {
  margin: 0.55rem 0.75rem 0 0.75rem;
  background: #ffffff;
}
.share-pt {
  height: 4.5rem;
}
.share-cont-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 0.75rem;
}
.share-cont-list {
  width: 33.333%;
  display: flex;
  font-size: 0.5rem;
  justify-content: center;
  align-items: center;
  color: #666666;
}
.share-cont-list > i {
  color: #c0c4cc;
  margin-left: 0.75rem;
  font-size: 0.5rem;
}
.share-switch-tab {
  display: flex;
  background: #ffffff;
  align-items: center;
  justify-content: center;
  margin: 0 0.75rem;
}
.share-switch-tab div {
  cursor: pointer;
}
.share-switch-tablist {
  width: 50%;
  display: flex;
  justify-content: center;
  font-weight: bold;
  text-align: center;
  padding: 0.95rem 0;
  line-height: 1.25rem;
  color: #333333;
  font-size: 0.75rem;
}
.acitve {
  background: #39b4ff;
  color: #ffffff;
}
.el-select-dropdown__list {
  text-align: center;
}
.el-select {
  padding: 0 1.35rem;
}
.el-select > .el-input {
  display: flex;
}
.el-input__suffix {
  position: initial !important;
}
.el-input__inner {
  border: none;
  background-color: #ffffff;
  color: #666666;
  text-align: center;
  font-size: 0.5rem;
  padding: 0 0;
}
.el-select .el-input .el-select__caret {
  font-size: 0.5rem;
}
/* #fyid{width: 100%;} */
.brochure-title {
  /* background: #ccc; */
  position: relative;
  top: -40px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ccc;
}
.brochure-content {
  background: #fff;
}
.brochure-content label {
  margin-left: 10%;
  display: inline-block;
  width: 60px;
}
.brochure-content span {
  color: #39b4ff;
  cursor: pointer;
}
.brochure-content input {
  min-width: 40%;
  height: 28px;
  background: #fff;
  border: 0.5px solid #eee;
  border-radius: 3px;
  text-indent: 10px;
  color: #666;
}
</style>
